import React from "react";
import classnames from "classnames";
import { toJS } from "mobx";
import { inject, observer } from "mobx-react";
import { withRouter } from "react-router-dom";
import { Accordion, Tools, List } from "weaver-mobile";
import { openHrmCard } from "../../../util";

const getLabel = Tools.getLabel;
const Item = List.Item;
const noop = () => {};

@withRouter
@inject("communicationStore")
@observer
export default class Participation extends React.Component {
  static defaultProps = {
    prefixCls: "cowork-communication-detail-parterList",
  };

  constructor(props) {
    super(props);
    this.state = {
      coworkid: null,
      visible: true,
      conditionActiveKeys: ["0", "1", "2"],
      resourceActiveKeys: ["0", "1", "2", "3", "4", "5"],
      isCoworkHiddened: "", //是否默认打开主题
      fixTop: false,
    };
  }

  parterListChange = (key) => {
    this.setState({ conditionActiveKeys: key });
  };

  getCountShowInfo = (item) => {
    return item && item.hasOwnProperty("count") && Number(item.count) > 0
      ? "(" + Number(item.count) + ")"
      : "";
  };

  onCoverageViewMore = () => {
    const {
      location: { pathname },
      history,
    } = this.props;
    history.push(`${pathname}/coverage?table_nocheck=1`);
  };

  /*
   * @params
   * list: 最外面的List
   * data: 要渲染的内容
   */
  renderChildren = (list, data, datas) => {
    if (datas.type === "0") {
      // 对参与范围特殊处理
      datas.name = getLabel("388933", "查看全部");
      list.nameOnClick = this.onCoverageViewMore;
    }
    let commonStyle = { color: "#55B1F9", WebkitBoxOrient: "vertical" };
    const child = Array.isArray(data) ? (
      <span
        className="contentName principal"
        style={list.nameOnClick ? commonStyle : { WebkitBoxOrient: "vertical" }}
      >
        {data.map((v) => (
          <span
            key={`brief_${Math.random().toString(36).substr(2, 6)}`}
            className="name"
            onClick={(e) => (list.nameOnClick ? list.nameOnClick(e, v) : noop)}
          >
            {v.name}
          </span>
        ))}
      </span>
    ) : (
      [
        <span
          key="brief_singleshow"
          className="contentName principal"
          style={
            list.nameOnClick ? commonStyle : { WebkitBoxOrient: "vertical" }
          }
          onClick={(e) => (list.nameOnClick ? list.nameOnClick(e, data) : noop)}
        >
          {data.contentName || data.name}
        </span>,
        data.seclevel && data.seclevel !== "" && (
          <span className="contentName">
            {data.seclevel}-{data.seclevelMax}
          </span>
        ),
      ]
    );

    return (
      <Item
        arrow={datas.type === "SELECTLIST" ? "horizontal" : ""}
        wrap
        multipleLine
        onClick={() => datas.onClick && datas.onClick()}
        key={`parterline_${Math.random() * 100}`}
        className={`${this.props.prefixCls}-list-line`}
      >
        {list.hasTitle && (
          <span className="shareName">
            {datas.shareName || datas.name + this.getCountShowInfo(datas)}
          </span>
        )}
        {child}
      </Item>
    );
  };

  render() {
    const {
      prefixCls,
      communicationStore: { detailStore },
      location: { pathname },
      history,
    } = this.props;
    let { partersMap } = detailStore;
    const nameOnClick = (e, data) => {
      e.preventDefault();
      e.stopPropagation();
      openHrmCard(data.id);
    };
    const participationList = [
      {
        id: 0,
        name: getLabel(83210, "参与条件"),
        hasTitle: true,
        hasSubList: false,
        list: partersMap.alist,
      },
      {
        id: 1,
        name: getLabel(18605, "参与人员"),
        hasTitle: true,
        hasSubList: true,
        nameOnClick,
        list: [
          {
            id: 100,
            name: getLabel(390701, "主题负责人"),
            item: toJS(partersMap.principals),
          },
          {
            id: 101,
            name: getLabel(390702, "主题创建人"),
            item: toJS(partersMap.creaters),
          },
          {
            id: 102,
            name: getLabel(390703, "版块负责人"),
            item: toJS(partersMap.typemanagerids),
            count: partersMap.typemanageridsCount,
          },
          {
            id: 103,
            name: getLabel(17689, "参与者"),
            item: toJS(partersMap.parterids),
            count: partersMap.parteridsCount,
            type: "SELECTLIST",
            onClick: () =>
              history.push(`${pathname}/participation?type=parter`),
          },
          {
            id: 104,
            name: getLabel(382659, "已退出人员"),
            item:
              toJS(partersMap.quiters).length > 5
                ? toJS(partersMap.quiters).slice(0, 5)
                : toJS(partersMap.quiters), // 这里去掉toJS 会有数据渲染问题
            count: partersMap.quitersCount,
            type: "SELECTLIST",
            onClick: () =>
              history.push(`${pathname}/participation?type=quiter`),
          },
        ],
      },
      {
        id: 2,
        name: getLabel(17696, "未查看者"),
        hasTitle: false,
        hasSubList: false,
        listShowName: true,
        list: toJS(partersMap.noReadids),
        count: partersMap.noReadidsCount,
        type: "SELECTLIST",
        nameOnClick,
        onClick: () => history.push(`${pathname}/participation?type=unread`),
      },
    ];

    return (
      <div className={prefixCls}>
        <Accordion
          className={`${prefixCls}-accordion`}
          activeKey={this.state.conditionActiveKeys}
          onChange={this.parterListChange}
        >
          {participationList.map((line) => {
            return line.list.length > 0 ? (
              <Accordion.Panel
                header={line.name + this.getCountShowInfo(line)}
                key={line.id}
              >
                <List
                  className={classnames(
                    `${prefixCls}-list`,
                    line.prefixCls ? line.prefixCls : ""
                  )}
                >
                  {!line.listShowName
                    ? toJS(line.list).map((item, index) => {
                        if (line.hasSubList) {
                          // id = 1
                          return item.item.length > 0
                            ? this.renderChildren(line, item.item, item)
                            : null;
                        }
                        // id = 0
                        return this.renderChildren(line, item, item);
                      })
                    : this.renderChildren(line, line.list, line)}
                </List>
              </Accordion.Panel>
            ) : null;
          })}
        </Accordion>
      </div>
    );
  }
}
